---
title: ConnectButton
description: Verwendung und Anpassung des ConnectButtons
---

# ConnectButton

## Verwendung und Anpassung des ConnectButtons

Dies ist die Hauptkomponente. Sie ist für das Rendern des Verbindungs-/Trennungs-Buttons verantwortlich sowie für die Chain-Swap-Benutzeroberfläche.

```tsx
import { ConnectButton } from '@rainbow-me/rainbowkit';

export const YourApp = () => {
  return <ConnectButton />;
};
```

> Hinweis: Stellen Sie sicher, dass Ihre App in die erforderlichen Provider eingebettet ist. [Weiterlesen](/docs/installation#wrap-providers).

### Eigenschaften

Die `ConnectButton` Komponente bietet mehrere Eigenschaften zur Anpassung ihres Erscheinungsbildes, einschließlich des Umschaltens der Sichtbarkeit verschiedener Elemente.

<PropsTable
  data={[
    {
      name: 'label',
      required: false,
      default: 'Wallet verbinden',
      type: 'string',
      description: 'Das Textlabel, das auf dem Verbinden-Button angezeigt wird',
    },
    {
      name: 'accountStatus',
      required: false,
      default: 'full',
      type: '"avatar" | "address" | "full" | { smallScreen: AccountStatus, largeScreen?: AccountStatus }',
      typeSimple: 'enum',
      description:
        "Ob das Avatar und/oder die Adresse des aktiven Kontos angezeigt wird",
    },
    {
      name: 'chainStatus',
      required: false,
      default: '{ smallScreen: "icon", largeScreen: "full" }',
      type: '"icon" | "name" | "full" | "none" | { smallScreen: ChainStatus, largeScreen?: ChainStatus }',
      typeSimple: 'enum',
      description:
        "Ob das Icon und/oder der Name der aktuellen Blockchain angezeigt oder vollständig versteckt wird",
    },
    {
      name: 'showBalance',
      required: false,
      default: '{ smallScreen: false, largeScreen: true }',
      type: 'boolean | { smallScreen: boolean, largeScreen?: boolean }',
      typeSimple: 'enum',
      description:
        'Ob das Guthaben neben dem Kontonamen sichtbar ist',
    },
  ]}
/>

> Hinweis: Der eingebaute `largeScreen`-Breakpoint ist `768px`.

### Beispiele

#### Label

Verwenden Sie die `label` Eigenschaft, um einen benutzerdefinierten `ConnectButton`-Text festzulegen.

```tsx
<ConnectButton label="__Sign in__" />
```

#### Kontostatus

Hier sind einige verschiedene Möglichkeiten, wie Sie die `accountStatus`-Eigenschaft verwenden können.

Nur das Avatar des Kontos anzeigen.

```tsx
<ConnectButton accountStatus="__avatar__" />
```

Nur die Adresse des Kontos anzeigen.

```tsx
<ConnectButton accountStatus="__address__" />
```

#### Chain-Status

Hier sind einige verschiedene Möglichkeiten, wie Sie die `chainStatus`-Eigenschaft verwenden können.

Nur das Icon der aktuellen Chain anzeigen.

```tsx
<ConnectButton chainStatus="__icon__" />
```

Nur den Namen der aktuellen Chain anzeigen.

```tsx
<ConnectButton chainStatus="__name__" />
```

Die Chain-Benutzeroberfläche vollständig ausblenden.

```tsx
<ConnectButton chainStatus="__none__" />
```

#### Guthaben anzeigen

Verwenden Sie die `showBalance`-Eigenschaft, um das Guthaben ein- oder auszublenden.

Das Guthaben ausblenden.

```tsx
<ConnectButton showBalance={__false__} />
```

#### Responsive

Diese Eigenschaften können auch in einem responsiven Format definiert werden.

Auf kleinen Bildschirmen nur das Konto-Icon anzeigen. Auf großen Bildschirmen jedoch Icon und Adresse anzeigen.

```tsx
<ConnectButton
  accountStatus={{
    smallScreen: 'avatar',
    largeScreen: 'full',
  }}
/>
```

Auf kleinen Bildschirmen das Guthaben ausblenden. Auf großen Bildschirmen anzeigen.

```tsx
<ConnectButton
  showBalance={{
    smallScreen: false,
    largeScreen: true,
  }}
/>
```
